<template>
  <vxe-table :data="tableData" :sort-config="sortConfig" @sort-change="sortChange">
    <template v-for="(item, IDX) in columns">
      <!-- 序号列 -->
      <vxe-column v-if="item.type == 'seq'" type="seq" width="50" title="序号"></vxe-column>
      <!-- 普通内容列 -->
      <vxe-column
        v-if="!item.type"
        :field="item.field"
        :title="item.title"
        :width="item.width"
        :fixed="item.fixed"
        :align="item.align"
        :sortable="item.sortable"
      ></vxe-column>
      <!-- 颜色数据列-->
      <vxe-column v-if="item.type == 'withColorRatio'" :title="item.title">
        <template #default="{row}">
          <TableRowTextColorRatio
            :row="row"
            :field="item.field"
            :suffix="item.suffix"
            :bigNumber="item.bigNumber"
          ></TableRowTextColorRatio>
        </template>
      </vxe-column>
      <!-- 插槽列 -->
      <vxe-column v-if="item.type == 'slot'" :title="item.title">
        <template #default="{row}">
          <slot :name="item.slotName" :row="row"> </slot>
        </template>
      </vxe-column>
    </template>
  </vxe-table>
</template>
<script>
import TableRowTextColorRatio from './components/tableRowTextColorRatio'
export default {
  name: 'BaseVxeTable',
  components: {
    TableRowTextColorRatio,
  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
    sortConfig: {
      type: Object,
      default: () => {
        return {
          trigger: 'default', //可以选择触发源是箭头还是单元格
          remote: true,
          // defaultSort: {field: 'age', order: 'desc'},
          // orders: ['desc', 'asc', null],
        }
      },
    },
  },
  computed: {
    // sortConfig() {},
  },
  data() {
    return {
      // tempColumns: [],
    }
  },
  methods: {
    sortChange(val) {
      let {field, order} = val
      this.$emit('sortChange', {field, order})
    },
  },
}
</script>
<style lang="less" scoped></style>
